<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />

    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main ul li .li_box {
            height: 50px;
            line-height: 50px;
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            background-color: #fff;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 15px;
        }
        .main ul li:first-child .li_box {
            height: 65px;
            line-height: 65px;
        }
        .main ul li:last-child .li_box {
            border-bottom: none;
        }
        .main ul li .li_box .li_boxl {
            font-size: 15px;
            color: #333;
        }
        .main ul li .li_box .li_boxc {
            color: #999;
            font-size: 14px;
            padding: 0 8px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: right;
        }
        .main ul li .li_box .li_boxc .li_img {
        	width: 43px;
        	height: 43px;
        	border-radius: 50%;
        	overflow: hidden;
        	margin-right: 7px;
        	float: right;
        }
        .main ul li .li_box .li_boxc .li_img img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        }
        .main ul li .li_box .li_boxr img {
        	height: 13px;
        	display: block;
        }
        .main ul li .li_box .li_boxr2 {
            color: #999;
            font-size: 14px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            text-align: right;
        }
        input {
            outline: none;
            text-align: right;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li tapmode onclick="fnHeadPortrait();">
                <div class="li_box">
                    <div class="li_boxl">头像</div>
                    <div class="li_boxc">
                    	<div class="li_img">
                    		<img class="head_img" src="../image/default.png">
                    	</div>
                    </div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
    		<li>
                <div class="li_box">
                    <div class="li_boxl">昵称</div>
                    <div class="li_boxc"><input class="user_name" type="text" value="" placeholder="输入昵称"></div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">手机号</div>
                    <div class="li_boxr2 user_tel"></div>
                </div>
            </li>
    	</ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        user = $api.getStorage('user_data');
        api.addEventListener({
            name: 'userChangeEvent'
        }, function(ret, err) {
            if (ret) {
                fnGetUser();
            }
        });

          fnGetUser();  

          api.addEventListener({
              name: 'editDataEvent'
          }, function(ret, err) {
              if (ret) {
                  var new_nickname = $('.user_name').val();
                  if(new_nickname == nickname) {
                    api.closeWin();
                  }else if(new_nickname.length > 15){
                    api.toast({
                        msg: '昵称不能大于15位字符',
                        location: 'middle'
                    });
                  }else {
                    openLoading();
                    api.ajax({
                        url: rootPath+'/api/user/edit_userinfo',
                        method: 'post',
                        data: {
                            values: { 
                                nickname: new_nickname,
                                uid : user.id,
                                token: user.token
                            },

                        }
                    }, function(ret, err) {
                        if (ret) {
                            if(ret.status == 200) {
                                user.nickname = new_nickname;
                                $api.setStorage('user_data',user);
                                api.toast({
                                    msg: '修改成功',
                                    location: 'middle'
                                });
                                api.sendEvent({
                                    name: 'userChangeEvent',
                                    extra: {
                                    }
                                });
                                setTimeout(function(){
                                    api.closeWin();
                                },1000)
                            }else {
                                api.toast({
                                    msg: '修改失败',
                                    location: 'middle'
                                });
                            }
                        }
                    });
                    closeLoading();
                  }
              } 
          });
    };

    // 头像
    function fnHeadPortrait() {
        api.openWin({
            name: 'head_portrait',
            url: 'head_portrait.html'
        });
    }

    function fnGetUser() {
        user = $api.getStorage('user_data');
        api.ajax({
            url: rootPath+'/api/user/get_user_info',
            method: 'get',
            data: {
                values: { 
                    uid: user.id,
                    token:user.token
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200) {
                    nickname = ret.data.nickname;
                    var head_img = formatHeadImg(ret.data.img);
                    $('.head_img').attr('src',head_img);
                    $('.user_name').val(ret.data.nickname);
                    $('.user_tel').text(ret.data.phone);
                }
            } else {
                
            }
        });
    }

</script>
</html>